<template>
  <div class="qrcode-container">
    <a-card class="card">
      <div class="qrcode-action">
        <a-input v-model:value="text" style="width: 300px" />
        <a-button type="primary" @click="onNormal">生成普通二维码</a-button>
        <a-button type="primary" @click="onLogo">生成带logo</a-button>
        <a-button type="primary" @click="onRandomColor"
          >生成随机颜色二维码 {{ color }}</a-button
        >
        <a-button type="primary" @click="onDown">下载</a-button>
      </div>
      <vue-qr
        :text="text"
        :logoSrc="src"
        :colorDark="color"
        colorLight="#fff"
        :callback="getImg"
      ></vue-qr>
      <a-descriptions title="配置项" bordered :column="1">
        <a-descriptions-item label="官方文档"
          >https://github.com/Binaryify/vue-qr</a-descriptions-item
        >
        <a-descriptions-item label="colorDark"
          >二维码实心颜色</a-descriptions-item
        >
        <a-descriptions-item label="colorLight"
          >空白区的颜色</a-descriptions-item
        >
        <a-descriptions-item label="callback"
          >获取的二维码图片编码</a-descriptions-item
        >
      </a-descriptions>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import * as util from "@/util/util.js";
import tool from "@/util/imgTool.js";
import moment from "moment";

let url = tool.getAssetsFile("1000.png");
const text = ref<string>("Hello world!");
const src = ref("");
const color = ref("#000");
let imgUrl = "";

const onNormal = () => {
  src.value = "";
};
const onLogo = () => {
  src.value = url;
};
const onRandomColor = () => {
  color.value = "#" + Math.random().toString(16).substr(2, 6);
};
const getImg = (dataUrl: string) => {
  imgUrl = dataUrl;
};
const onDown = () => {
  util.createImage(imgUrl, moment().valueOf() + "png");
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.qrcode-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;

    .qrcode-action {
      :deep(.ant-btn) {
        margin: 0 6px;
      }
    }
  }
}
</style>
